<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form name="form1" onsubmit="return validate()">
		用户名：<input type="text" name="uname">
		密码：<input type="password" name="pwd">
		<select name="area">
			<option value="0">请选择</option>
			<option value="gz">广州</option>
			<option value="sh">上海</option>
			<option value="bj">北京</option>
		</select>
		<textarea name="content" rows="10" cols="30"></textarea>
		<input type="submit" value="提交">
		<!-- <input type="submit" value="提交" onclick="return validate()"> -->
	</form>

	<script type="text/javascript">
		// 获取form元素
		var form1 = document.forms['form1']
		var form2 = document.forms[0]
		console.log(form1)
		console.log(form2)

		// 获取form元素的表单域元素
		var el = form1.elements
		console.log(el)

		var uname = el['uname']
		var pwd = el['pwd']
		var area = el['area']
		var content = el['content']

		console.log(uname)
		console.log(pwd)

		// 表单验证
		// 单个验证
		uname.onfocus = function() {
			console.log('获得焦点')
			uname.value = '';
		}
		uname.onblur = function() {
			console.log('失去焦点')
			if( uname.value == '' ) {
				alert('用户名不能为空')
			}
		}

		uname.onchange = function() {
			console.log(uname.value)
		}

		area.onchange = function() {
			console.log(area.value)
		}
		
		content.onchange = function() {
			console.log(content.value)
		}


		// 方法1：<input type="submit"onclick="return validate();" />
		// 方法2：<form action=""onsubmit="return validate();" />
		function validate () {
			console.log( uname.value )
			console.log( pwd.value )

			// 层层拦截
			if( uname.value == '' ) {
				alert('用户名不能为空')
				return false;
			}

			if( pwd.value == '' ) {
				alert('密码不能为空')
				return false;
			}

			if( !/[a-zA-Z0-9]{6,}/.test(pwd.value) ) {
				alert('密码至少为6位数以上...')
				return false;
			}

			if( area.value == 0) {
				alert('请选择您的所在地...')
				return false;
			}

			return true;
		}

	</script>
</body>
</html>